<template>
  <div ref="artList" class="artice-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :success-duration="1000" success-text="刷新成功">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad(item.id)"
      >
      <artItem class="item" :it="it" v-for="(it, index) in news" :key="index"   @click="$router.push({ path: '/detail', query: { id: it.art_id } })"></artItem>

      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import {throttle} from 'lodash'
import artItem from '../art_item'
import { mapActions } from "vuex";
import { requestnews } from "@/api";
export default {
  name: "art_List",
  components:{artItem},
  props: ["item"],
  data() {
    return {
      news: [], //新闻
      id: 0, //渠道id
      loading: false, //是否加载中，默认是false
      finished: false, //是否所有数据加载完毕，默认false
      refreshing: false,
      timestamp: null, //时间戳或分页器
      error: false,
      top:'',
    };
  },
  methods: {
    ...mapActions(["allChannel", "userChannel"]),
    // 获取新闻列表---实例化van-list组件的时候会自动调用onload知道铺满屏幕
    // 2-van-list组件自动调用onLoad的时候，会自动的把loading设置为true
    async onLoad() {
      try {
        // onLoad中要做的几件事情
        // 1. 利用分页参数等调用接口获取列表数据
        const { data } = await requestnews({
          channel_id: this.id, // 频道 id
          timestamp: this.timestamp || Date.now(),
          with_top: 1,
        });
        this.refreshing = false;
        // 2. 把拿到的数据追加到数组的尾部
        this.news.push(...data.results);
        // 3. 把loading是否加载中设置为false
        this.loading = false;
        // 4. 判断还有没有下一页的数据
        if (data.pre_timestamp) {
          // 如果pre_timestamp为null代表是最后一页数据了
          // 5. 如果还有下一页数据就修改分页参数：让下一次调接口的时候获取的时下一页的数据
          this.timestamp = data.pre_timestamp;
        } else {
          // 6. 如果没有下一页的数据就把finished设置为true：表示所有数据已加载完毕
          this.finished = true;
        }
      } catch (error) {
        this.error = true;
        this.loading = false;
      }
    },
    // 下拉刷新
    onRefresh() {
      this.finished = false;
      this.news = [];
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.error = false,
      this.timestamp = null
      this.onLoad();
      // 清空列表数据
      //   this.finished = false;
      //   this.news = [];
      //   // 重新加载数据
      //   // 将 loading 设置为 true，表示处于加载状态
      //   this.loading = true;
      //   this.onLoad();
        this.refreshing = false
    },
  },
  mounted(){
    // 在挂载后监听art-list的滚动事件
    this.$refs.artList.addEventListener('scroll',throttle(()=>{
      // 滚动条的位置
      console.log(this.$refs.artList.scrollTop)
      this.top=this.$refs.artList.scrollTop
    },200))
  },
  // 组件激活的钩子函数
  activated(){
    this.$refs.artList.scrollTop=this.top
  }
};
</script>

<style lang="less" scoped>
.artice-list {
  margin-top: 188px;
  height: calc(100vh - 188px);
  overflow-y: auto;
}
img {
  width: 232px;
  height: 146px;
}
.item {
  padding: 25px 23px 31px;
  background-color: #fff;
  border: 1px solid #edeff3;
  .left {
    font-size: 32px;
    margin-bottom: 29px;
    color: #3a3a3a;
  }
  .right {
    display: flex;
  }
  .footer {
    display: flex;
    font-size: 23px;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 31px;
    color: #b4b4b4;
    .footleft {
      width: 430px;
      display: flex;
      text-align: center;
      line-height: 22px;
      justify-content: space-between;
      .up {
        color: red;
      }
    }
    i {
      font-size: 26px;
    }
  }
  .around {
    display: flex;
    justify-content: space-between;
  }
}

</style>
